<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物介绍</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/Subpage.css">
</head>

<body>
    <div class="wrap">
        <div class="index">

            <div class="container">

                <div class="row">
                    <div class="col-md-3 col-xs-12 col-sm-12  max-box">
                        <div class="box">

                            <div class="box-img">

                                <p class="home">Vision robot</p>



                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-12  max-box">
                        <div class="box">
                            <div class="box-img">
                                <p class="home">Black Widow</p>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-12  max-box">
                        <div class="box">
                            <div class="box-img">
                                <p class="home">Thor</p>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-12  max-box">
                        <div class="box">
                            <div class="box-img">
                                <p class="home">Spider-Man</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
        <div class="max">
            <div class="girl">
                <span class="glyphicon glyphicon-remove my-del"></span>
                <div class="introduction">
                    <div class="introduction-cententer">
                        <h1>Vision robot</h1>
                        <p>The film tells that in order to deal with the exiled rocky in Raytheon, the commander of aegis, Nick Frey actively runs to find the strongest one. Under the mediation of aegis, he gathers six superheroes, iron man, Captain America,
                            Thor, Hulk, black widow and Hawkeye, to form an avenger alliance and work together to deal with the evil god rocky.</p>
                        <p>Profile: Introduce: arrogant genius inventor and billionaire, because be abducted by thug when going to Afghanistan, Tony's heart suffers heavy injury, rely on special device to live only. During the kidnapping, the mob forced
                            Tony to manufacture the "Jericho missile" produced by his company. Among them, he also met another scientist: yinsen. In order to get away, Tony made a battle armor with simple materials. After making the armor, yinsen died
                            to buy time for Tony, which also changed Tony. He killed the terrorists and escaped with the strong combat power of the armor. Then Tony improved the armor through many tests and became the superhero iron man. Later, he joined
                            the avenger and became the team leader . Not with Thor. The second leading actor of the film.</p>
                    </div>
                </div>
            </div>
            <div class="woman">
                <span class="glyphicon glyphicon-remove my-del"></span>
                <div class="introduction">
                    <div class="introduction-cententer">
                        <h1>Black Widow</h1>
                        <p>The film tells that in order to deal with the exiled rocky in Raytheon, the commander of aegis, Nick Frey actively runs to find the strongest one. Under the mediation of aegis, he gathers six superheroes, iron man, Captain America,
                            Thor, Hulk, black widow and Hawkeye, to form an avenger alliance and work together to deal with the evil god rocky.</p>
                        <p>Profile: Introduce: arrogant genius inventor and billionaire, because be abducted by thug when going to Afghanistan, Tony's heart suffers heavy injury, rely on special device to live only. During the kidnapping, the mob forced
                            Tony to manufacture the "Jericho missile" produced by his company. Among them, he also met another scientist: yinsen. In order to get away, Tony made a battle armor with simple materials. After making the armor, yinsen died
                            to buy time for Tony, which also changed Tony. He killed the terrorists and escaped with the strong combat power of the armor. Then Tony improved the armor through many tests and became the superhero iron man. Later, he joined
                            the avenger and became the team leader . Not with Thor. The second leading actor of the film.</p>
                    </div>
                </div>


            </div>
            <div class="Thor">
                <span class="glyphicon glyphicon-remove my-del"></span>
                <div class="introduction">
                    <div class="introduction-cententer">
                        <h1>Thor</h1>
                        <p>The film tells that in order to deal with the exiled rocky in Raytheon, the commander of aegis, Nick Frey actively runs to find the strongest one. Under the mediation of aegis, he gathers six superheroes, iron man, Captain America,
                            Thor, Hulk, black widow and Hawkeye, to form an avenger alliance and work together to deal with the evil god rocky.</p>
                        <p>Profile: Introduce: arrogant genius inventor and billionaire, because be abducted by thug when going to Afghanistan, Tony's heart suffers heavy injury, rely on special device to live only. During the kidnapping, the mob forced
                            Tony to manufacture the "Jericho missile" produced by his company. Among them, he also met another scientist: yinsen. In order to get away, Tony made a battle armor with simple materials. After making the armor, yinsen died
                            to buy time for Tony, which also changed Tony. He killed the terrorists and escaped with the strong combat power of the armor. Then Tony improved the armor through many tests and became the superhero iron man. Later, he joined
                            the avenger and became the team leader . Not with Thor. The second leading actor of the film.</p>
                    </div>
                </div>

            </div>
            <div class="Spider-Man">
                <span class="glyphicon glyphicon-remove my-del"></span>
                <div class="introduction">
                    <div class="introduction-cententer">
                        <h1>Spider-Man</h1>
                        <p>The film tells that in order to deal with the exiled rocky in Raytheon, the commander of aegis, Nick Frey actively runs to find the strongest one. Under the mediation of aegis, he gathers six superheroes, iron man, Captain America,
                            Thor, Hulk, black widow and Hawkeye, to form an avenger alliance and work together to deal with the evil god rocky.</p>
                        <p>Profile: Introduce: arrogant genius inventor and billionaire, because be abducted by thug when going to Afghanistan, Tony's heart suffers heavy injury, rely on special device to live only. During the kidnapping, the mob forced
                            Tony to manufacture the "Jericho missile" produced by his company. Among them, he also met another scientist: yinsen. In order to get away, Tony made a battle armor with simple materials. After making the armor, yinsen died
                            to buy time for Tony, which also changed Tony. He killed the terrorists and escaped with the strong combat power of the armor. Then Tony improved the armor through many tests and became the superhero iron man. Later, he joined
                            the avenger and became the team leader . Not with Thor. The second leading actor of the film.</p>
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    $(function() {
        $('.box:odd').css('top', '-1000px')
        $('.box:even').css('bottom', '-1000px')
        $('.box:odd').animate({
            opacity: 1,
            top: 0
        }, 1000)
        $('.box:even').animate({
            opacity: 1,
            bottom: 0
        }, 1000)
        var bg = $('.box-img')
        var q = 1;
        $.each(bg, function(i, ele) {

            q++
            $(this).css({
                'background': 'url(./images/' + q + '.jpg)',
                'backgroundPosition': 'center',
                'backgroundRepeat': 'no-repeat',
                'backgroundSize': 'cover'
            })

        })
        $('.max').children('div').hide()
        $('.box').click(function() {
            // 省略层级 否则获取的索引号为0 因为.box不是兄弟关系 不能用(this).index 
            var index = $('.box').index(this)
            $('.max').children('div').eq(index).show().siblings('div').hide()
            $('.max').animate({
                right: 0
            }, 1000)

        })
        $('.my-del').click(function() {
            $('.max').animate({
                right: '-100%'
            })
        })

    })
</script>

</html>